<script setup lang="ts">

const name = [
  'hello1', 'hello2',
  'hello3', 'hello4',
  'hello5', 'hello6',
  'hello7', 'hello8',
  'hello9',
];
const data = [
  10, 15, 12, 15, 10,
  2, 8, 9, 10,
];
const links = [
  { source: 'hello1', target: 'hello2', value: 10 },
  { source: 'hello1', target: 'hello3', value: 15 },
  { source: 'hello3', target: 'hello4', value: 12 },
  { source: 'hello1', target: 'hello4', value: 15 },
  { source: 'hello1', target: 'hello5', value: 10 },
  { source: 'hello1', target: 'hello6', value: 2 },
  { source: 'hello1', target: 'hello7', value: 8 },
  { source: 'hello1', target: 'hello8', value: 9 },
  { source: 'hello1', target: 'hello9', value: 10 },
];
const categories = [
  'group', 'group1',
  'group1', 'group2',
  'group2', 'group2',
  'group2', 'group2',
  'group2',
];
const option = {
  title: {
    text: 'Les Miserables',
    subtext: 'Default layout',
    top: 'bottom',
    left: 'right',
  },
  tooltip: {},
  legend: [
    {
      // selectedMode: 'single',
      data: name,
    },
  ],
  series: [
    {
      name: 'Les Miserables',
      type: 'graph',
      layout: 'force',
      data,
      links,
      categories,
      roam: true,
      label: {
        position: 'right',
      },
      force: {
        repulsion: 100,
      },
    },
  ],
};
</script>

<template>
  <v-chart
    class="chart"
    :option="option"
    autoresize
  />
</template>

<style scoped>
</style>
